<template>
  <el-form-item :class="getClz()" :prop="opt.name"  v-if="!opt.hide" v-bind="opt.itemProps">
    <div slot="label" style="display: inline-block">{{opt.text}}<el-popover v-if="Boolean(opt.textLabel)" placement="top" trigger="hover"><div>{{opt.textLabel}}</div><i slot="reference" class="el-icon-warning" /></el-popover></div>
    <el-radio-group v-model="data[opt.name]"
                    v-bind="opt.props"
                    @change="setValueMap">
      <el-radio
              v-for="option in opt.options"
              :key="option[opt.optionsValue]"
              :label="option[opt.optionsValue]"
              :disabled="option.disabled"
      >
        {{option[opt.optionsLabel]+''}}
      </el-radio>
    </el-radio-group>
  </el-form-item>
</template>

<script>
  import extend from '../extend';
  let Log = ()=>{};

  export default {
    name: "FormRadio",
    mixins:[extend],
    dicts:[],
    data(){
      return {
        opt:{
          name:'',
          text:'',
          className:'',
          itemProps:{},
          props:{
            disabled:false
          },
          hide:false,
          placeholder:'',
          hasNull:false,
          options:[],
          optionsLabel:'label',
          optionsValue:'value'
        }
      }
    },
    created(){
      this.initOptions();
      this.onChange = this.column.onChange||Log;
    },
    methods:{
      setValue(val){
        this.$set(this.data,this.opt.name,val+'')
      },
      setValueMap(val){
        this.onChange(this.data,this.column);
      }
    }
  }
</script>
